<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据添加页面</title>
    <!--引入axios库-->
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <h3>添加品牌</h3>
    <form action="" method="post">
        品牌名称：<input id="brandName" v-model="brand.brandName" name="brandName"><br>
        企业名称：<input id="companyName" v-model="brand.companyName" name="companyName"><br>
        排序：<input id="ordered" v-model="brand.ordered" name="ordered"><br>
        描述信息：<textarea rows="5" cols="20" id="description" v-model="brand.description" name="description"></textarea><br>
        状态：
        <input type="radio" v-model="brand.status" name="status" value="0">禁用
        <input type="radio" v-model="brand.status" name="status" value="1">启用<br>

        <input type="button" id="btn" v-on:click="submitForm" value="提交">
    </form>
</div>
</body>
<script>
    /*
    //原生JS
    //给按钮绑定一个点击事件，一旦点击提交按钮就发送给AJAX请求，实现局部刷星
    document.querySelector("#btn").onclick = function () {
        //0、将表单数据转换成JSON字符串
        var formData = {
            brandName : "",
            companyName : "",
            ordered : "",
            description : "",
            status : "",
        }
        //获取数据
        let brandName =  document.querySelector("#brandName").value;
        let companyName =  document.querySelector("#companyName").value;
        let ordered =  document.querySelector("#ordered").value;
        let description =  document.querySelector("#description").value;
        let status =  document.getElementsByName("status");//重点、难点！
        //设置数据
        formData.brandName = brandName;
        formData.companyName = companyName;
        formData.ordered = ordered;
        formData.description = description;
        for (let i = 0; i < status.length; i++) {
            if(status[i].checked){
                //被选中，获对应的值
                formData.status = status[i].value;
            }
        }
        console.log(formData.status);

        //1、发送AJAX请求
        axios({
            method:"post",
            url:"http://localhost:8080/day13_brand-demo/addServlet",
            data:{
                brandName:formData.brandName,
                companyName:formData.companyName,
                ordered:formData.ordered,
                description:formData.description,
                status:formData.status
            }
        }).then(function (resp) {
            //判断响应是否成功
            if("success" == resp.data){
                location.href = "http://localhost:8080/day13_brand-demo/html/brand.html";
            }else{
                alert("数据添加失败，数据添不能为空！")
            }
        });
    }
*/

    /**
     * 采用Vue
     * 1、使用一个id为app的div将body里面的html的代码套起来
     * 2、使用v-on给提交按钮绑定点击事件
     * 4、使用v-model对标签进行数据的双向绑定
     */
    new Vue({
        el: "#app",
        //设置模型，将来自用户输入的数据和模型绑定，遮样可以使用Vue对象让axios访问，然后发送到Servlet
        data(){
            return{
                brand:{}
            }
        },
        methods:{
            submitForm(){
                //3、向Servlet发送AJAX请求
                //将Vue对象转换成一个变量，方便在axios中访问，axios中的this对象是Window对象
                var vue = this;
                axios({
                    method: "post",
                    url:"http://localhost:8080/day13_brand-demo/addServlet",
                    data:vue.brand
                }).then(function (resp) {
                    //判断响应是否成功
                    if("success" == resp.data){
                        location.href = "http://localhost:8080/day13_brand-demo/html/brand.html";
                    }else{
                        alert("数据添加失败，数据添不能为空！")
                    }
                });
            }
        }
    });
</script>
</html>